import React from 'react'
import { Routes, Route, useLocation, Navigate, BrowserRouter } from 'react-router-dom'
import Charge from '../pages/Shop/Charge'
import Home from '../pages/Home/Home'
import Index from '../pages/Index'
import Login from '../pages/Login'
import NotFind from '../pages/NotFind'
import Product from '../pages/Product/Product'
import ProductType from '../pages/ProductType/ProductType'
import Category from '../pages/Server/Category'
import Commission from '../pages/Server/Commission'
import ShopCategory from '../pages/Server/ShopCategory'
import Statistics from '../pages/Server/Statistics'
import Apply from '../pages/Shop/Apply'
import Complain from '../pages/Shop/Complain'
import Shop from '../pages/Shop/Shop'


type Props = {}

function RouterAuth({ }: Props) {
    const routes = [
        { path: '/', element: <Login></Login> },
        {
            path: '/home', element: <Index></Index>, children: [
                { path: '/home', element: <Home></Home> },
                { path: '/home/server/category', element: <Category></Category> },
                { path: '/home/server/shopCategory', element: <ShopCategory></ShopCategory> },
                { path: '/home/server/statistics', element: <Statistics></Statistics> },
                { path: '/home/server/commission', element: <Commission></Commission> },
                { path: '/home/shop/apply', element: <Apply></Apply> },
                { path: '/home/shop/complain', element: <Complain></Complain> },
                { path: '/home/shop/shop', element: <Shop></Shop> },
                { path: '/home/shop/charge', element: <Charge></Charge> },
                { path: '/home/product/productType', element: <ProductType></ProductType> },
                { path: '/home/product/product', element: <Product></Product> },
            ]
        },
        { path: '/login', element: <Login></Login> },
        { path: '/notFind', element: <NotFind></NotFind> },
        { path: '*', element: <Navigate to='/notFind'></Navigate> },
    ]
    const ShowRoutes = (list: any) => {
        return list.map((item: any, index: string) => {
            return (
                <Route key={index} path={item.path} element={item.element}>
                    {item?.children ? ShowRoutes(item.children) : ''}
                </Route>
            )
        })
    }

    return (
        <BrowserRouter>
            <Routes>
                {ShowRoutes(routes)}
            </Routes>
        </BrowserRouter>
    )
}

export default RouterAuth